<template>
  <el-select
    v-model="selected"
    multiple
    filterable
    remote
    :remote-method="search"
    value-key="id"
    :loading="loading"
  >
    <el-option v-for="space in spaces" :key="space.id" :label="space.title" :value="space">
      <span>{{ space.title }}</span>
      <span class="info f-mini"> - {{ space.owner.nickname }}</span>
    </el-option>
  </el-select>
</template>

<script>
import { formatSpacesList } from '@/components/spaces/format';

export default {
  name: 'select-spaces', // 选择空间
  data() {
    return {
      selected: [],
      spaces: [],
      loading: false,
    };
  },
  methods: {
    // 搜索空间
    search(query) {
      if (query && query.trim()) {
        this.loading = true;
        this.$api.search.fn({
          type: 'Product', // 搜索空间
          title: query,
        }).then((res) => { this.spaces = formatSpacesList(res.data); })
          .catch(() => {})
          .then(() => { this.loading = false; });
      }
    },
  },
  watch: {
    selected(val) { this.$emit('update:spaces', val); },
  },
};
</script>

<style></style>
